{include file="common/head"}
<style>
    .top-box {
        padding: 10px;
        display: flex;
        justify-content: space-between;
    }

    .search-box {
        width: 300px;
        position: relative;
    }

    .layui-input {
        padding-right: 40px;
    }

    .search-box .layui-icon {
        position: absolute;
        right: 3px;
        top: 0;
        font-size: 20px;
        color: #bbb;
        width: 38px;
        height: 38px;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
        border-radius: 0 50% 50% 0;
    }

    .search-box .layui-icon:hover {
        color: #000;
    }

    .table-box th,
    .table-box td {
        text-align: center;
        border: 0 none;
    }

    .table-box th {
        background-color: #2F4056;
        color: #fff;
    }
    .table-box tr:nth-child(2n){
        background-color: silver;
    }
</style>
<!-- 顶部导航 包含一个搜索内容,一个新增按钮 -->
<div class="top-box">
    <div class="search-box">
        <input type="text" placeholder="请输入需要搜索的内容" id="searchInput" class="layui-input">
        <i class="layui-icon layui-icon-search" onclick="search()"></i>
    </div>
    <button class="layui-btn layui-btn-normal layui-btn-sm " onclick="addUsers()">新增用户</button>
</div>
<table class="table-box layui-table">
    <thead>
        <tr>
            <th>id</th>
            <th>用户名</th>
            <th>用户名密码</th>
            <th>创建时间</th>
            <th>最后登录时间</th>
            <th>电话</th>
            <th style="width:150px;">操作</th>
        </tr>
        
    </thead>
    <tbody>
        {notempty name="usersList"}
        <!--不为空-->
        {foreach name="usersList" item="users"}
        <tr>
            <td>{$users->id}</td>
            <td>{$users->name}</td>
            <td>{$users->pwd}</td>
            <td>{$users->createtime}</td>
            <td>{$users->lastlogin}</td>
            <td>{$users->tel}</td>
            <td>
                <div class="layui-btn-group">
                    <button class="layui-btn  layui-btn-xs" onclick="resetUserPwd('{$users->id}','{$users->name}')">重置密码</button>
                    <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="delUsers('{$users->id}','{$users->name}')">删除用户</button>
                </div>
            </td>
        </tr>
        {/foreach}
        {else/}
        <!--为空-->
        <tr><td colspan="3">暂无数据</td></tr>
        {/notempty}
        
    </tbody>
</table>
{include file="common/foot"}
<script>
    function search(){
        var searchInput=document.getElementById('searchInput');
        var searchValue=searchInput.value;
        location.href="?search="+searchValue;
    }


    var index;
    function addUsers(){
        index=layer.open({
            type:1,
            area:["500px"],
            title:"新增账户",
            content:`{include file="common/addUsersForm"}`
        })
    }
    function usersFormSubmit(){
        var form=document.getElementById("form");
        var formData={
            'username':form.username.value,
            'pwd':form.pwd.value,
            'tel':form.tel.value,
        }
        $.post('api/createUsers',formData,function(res){
            layer.msg(res.msg,{shift:-1,time:800},function(){
                if(res.status==200){
                    layer.close(index);
                    location.reload();
                }
            })
        })
    }
        /* 实现重置密码共功能 */
    function resetUserPwd(userid,username){
        layer.confirm("你确定要重置"+username+"的密码",function(index){
            $.post("api/resetUserPwd",{"userid":userid},function(res){
                layer.msg(res.msg,{shift:-1,time:800},function(){
                    if(res.status==200){
                        layer.close(index);
                        location.reload();
                    }
                })
            })
        });
    }
    /* 实现删除用户功能 */
    function delUsers(userid,username){
        layer.confirm("你确定要删除"+username+"的账户",function(index){
            $.post("api/delUsers",{"userid":userid},function(res){
                layer.msg(res.msg,{shift:-1,time:800},function(){
                    if(res.status==200){
                        layer.close(index);
                        location.reload();
                    }
                })
            })
        });
    }
</script>